<template>
  <Head title="" isBack>
    <template #content>
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
      ></DateTab>
      <div class="edit-line"></div>
      <div class="line-card">
        <div class="left-card">
          <div class="dividend-info">
            <div class="card-title">企业名称</div>
            <div class="info">
              {{ data.orgData.orgName ? data.orgData.orgName : '--' }}
            </div>
          </div>
          <div class="dividend-info">
            <div class="card-title">组织机构代码</div>
            <div class="info">
              {{ data.orgData.code ? data.orgData.code : '--' }}
            </div>
          </div>
          <div class="dividend-info">
            <div class="card-title">联 系 人</div>
            <div class="info">
              {{ data.orgData.contactUser ? data.orgData.contactUser : '--' }}
            </div>
          </div>
          <div class="dividend-info">
            <div class="card-title">电 话</div>
            <div class="info">
              {{ data.orgData.contactNum ? data.orgData.contactNum : '--' }}
            </div>
          </div>
          <div class="dividend-info">
            <div class="card-title">邮 箱</div>
            <div class="info">
              {{ data.orgData.email ? data.orgData.email : '--' }}
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-content com-head-wrap1">
            <div class="card-data">
              <div class="card-item">
                <div class="iconfont icon-charging-capacity"></div>
                <div class="right">
                  <div class="card-title">充电度数（度）</div>
                  <div class="card-title1">
                    {{
                      data.detailData.power
                        ? formatNumber(data.detailData.power)
                        : '--'
                    }}
                  </div>
                </div>
              </div>
              <div class="card-item">
                <div class="iconfont icon-electricity-fee"></div>
                <div class="right">
                  <div class="card-title">实收电费（元）</div>
                  <div class="card-title1">
                    {{
                      data.detailData.powerAmount
                        ? formatNumber(data.detailData.powerAmount)
                        : '--'
                    }}
                  </div>
                </div>
              </div>
              <div class="card-item">
                <div class="iconfont icon-service-fee"></div>
                <div class="right">
                  <div class="card-title">实收服务费（元）</div>
                  <div class="card-title1">
                    {{
                      data.detailData.serviceAmount
                        ? formatNumber(data.detailData.serviceAmount)
                        : '--'
                    }}
                  </div>
                </div>
              </div>
              <div class="card-item">
                <div class="iconfont icon-dividend"></div>
                <div class="right">
                  <div class="card-title">
                    运营商分润（元）
                    <span class="card-title2">
                      {{
                        data.detailData.channelShareAmount
                          ? formatNumber(data.detailData.channelShareAmount)
                          : '--'
                      }}元
                    </span>
                  </div>
                  <div class="card-title">
                    其他方分润（元）
                    <span class="card-title2">
                      {{
                        data.detailData.otherShareAmount
                          ? formatNumber(data.detailData.otherShareAmount)
                          : '--'
                      }}元
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-tabs
        v-model="data.activeTab"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="分润方" name="order">
          <Table
            ref="tableRef"
            v-if="data.activeTab === 'order'"
            :columns="orderData.columns"
            :toolbar="orderData.toolbar"
            @get-list="getData"
          ></Table>
        </el-tab-pane>
        <el-tab-pane label="电站" name="station">
          <Table
            v-if="data.activeTab === 'station'"
            ref="tableStationRef"
            :columns="data.columns"
            :toolbar="data.toolbar"
            :handles="data.handles"
            @get-list="getData"
          ></Table
        ></el-tab-pane>
      </el-tabs>
    </template>
  </Head>
</template>
  
<script lang="ts" setup name="dividendSummaryDetail">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import {
  pagingOrgTotalRecord,
  getOrgTotalInfo,
  EXPORT_ORGTOTALREACORD,
} from '@/service/apis/financial';
import { queryOrgDetail } from '@/service/apis/enterprise';
import { formatNumber, exportFile } from '@/utils/utils';

const router = useRouter();
const route = useRoute();
const {
  query: { id, timeType, time },
} = route;

const tableRef = ref();
const tableStationRef = ref();

const data = reactive({
  isOne: true,
  formData: {} as any,
  detailData: {} as any,
  orgData: {} as any,
  activeTab: 'order',
  columns: [
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'power',
      label: '充电度数',
    },
    {
      prop: 'powerAmount',
      label: '实收电费',
    },
    {
      prop: 'serviceAmount',
      label: '实收服务费',
    },
    {
      prop: 'shareType',
      label: '分润模式',
    },
    {
      prop: 'channelShareAmount',
      label: '运营商分润金额',
    },
    {
      prop: 'otherShareAmount',
      label: '其他方分润金额',
    },
  ],
  handles: [
    {
      label: '订单明细',
      permission: 'dividendSummaryList.see',
      handle: (row: any) => {
        console.log('查看明细---', row);
        router.push({
          name: 'dividendOrderDetail',
          query: {
            stationId: row.stationId,
            timeType: data.formData.timeType,
            time: data.formData.time,
          },
        });
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'dividendSummaryList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const formData = Object.assign(data.formData, { orgId: id });
        exportFile(EXPORT_ORGTOTALREACORD, '分润汇总-电站', formData);
      },
    },
  ],
});
const orderData = reactive({
  columns: [
    {
      prop: 'shareProfitName',
      label: '分润方',
    },
    {
      prop: 'power',
      label: '充电度数',
    },
    {
      prop: 'powerAmount',
      label: '实收电费',
    },
    {
      prop: 'serviceAmount',
      label: '实收服务费',
    },
    {
      prop: 'otherShareAmount',
      label: '分润金额',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'dividendSummaryList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const formData = Object.assign(data.formData, { orgId: id });
        exportFile(EXPORT_ORGTOTALREACORD, '分润汇总-分润方', formData);
      },
    },
  ],
});
const handleClickTab = (e: any) => {
  console.log(e.props.name);
  if (e.props.name === 'station') {
    data.formData.type = 1;
    tableStationRef.value?.handleQuery();
  } else {
    data.formData.type = 0;
    tableRef.value?.handleQuery();
  }
};
const getTab = (value: any) => {
  if (data.isOne) {
    value.time = time;
    value.timeType = timeType;
    data.isOne = false;
  }
  data.formData = Object.assign(data.formData, value);
  if (data.formData.type === 0) {
    tableRef.value?.handleQuery();
  } else {
    tableStationRef.value?.handleQuery();
  }
};

const getData = (page: any, search: any) => {
  const formData = Object.assign(data.formData, { orgId: id });
  pagingOrgTotalRecord(formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        if (data.formData.type === 1) {
          console.log(tableRef);
          tableStationRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        } else {
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        }
      });
    }
  });
  getOrgTotalInfo(data.formData, page).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });
};
queryOrgDetail({ id: id }).then((res: any) => {
  data.orgData = res;
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.line-card {
  position: relative;
  margin: 0 12px;
  display: flex;
  justify-content: space-between;
  .left-card {
    width: 24%;
    height: 129px;
    background: linear-gradient(165.39deg, #d4dbf5 -17.51%, #a4b9ff 89.89%);
    border-radius: 8px;
    margin: 20px 0;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 25%;
      width: 25%;
      height: 129px;
      background-image: url(@/assets/images/financial-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.2;
    }
    .dividend-info {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      color: #262626;
      font-size: 12px;
      line-height: 20px;
      margin: 1px 0;
      &:first-child {
        padding-top: 12px;
      }
    }
  }

  .card {
    padding: 36px 0;
    margin: 20px 0;
    width: 75%;
    margin-left: 20px;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      // width: 20%;
      width: 120px;
      height: 127px;
      background-image: url(@/assets/images/financial-icon.png);
      background-repeat: no-repeat;
      background-size: cover;
      // opacity: 0.2;
    }
    .card-content {
      width: 100%;
      .card-data {
        margin-left: 60px;
        .card-item {
          display: flex;
          text-align: left;
          // .left-icon {
          //   height: 127px;
          //   background-image: url(@/assets/images/financial-icon.png);
          //   background-repeat: no-repeat;
          //   background-size: cover;
          // }
          .card-title {
            margin-left: 12px;
            font-size: 13px;
          }
          .card-title1 {
            margin-left: 12px;
            font-size: 11px;
          }
          .card-title2 {
            font-size: 11px;
          }
          .iconfont {
            font-size: 56px;
          }
          .iconfont {
            font-size: 56px;
          }
        }
      }
    }
  }
}
</style>